<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 按钮组 -->
      <div class="yl-btn-group">
        <YlButton uiType="plain" icon="el-icon-circle-plus-outline" @click="$router.push('/addStage')">新 增</YlButton>
      </div>
      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          :data="tableData"
        >
          <el-table-column align="center" label="序号" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="项目类型">
            <template slot-scope="{row}">
              <span v-if="row.nns_type == 1">行政</span>
              <span v-else-if="row.nns_type == 2">教学</span>
              <span v-else>通用</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="预算开始时间" prop="nns_start_time" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="预算结束时间" prop="nns_end_time" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="编制填写结束时间" prop="nns_write_end_time" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="项目状态">
            <template slot-scope="{row}">
              <span v-if="row.nns_state == 1" class="success">开启</span>
              <span v-else class="info">关闭</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <YlButton uiType="main" btnType="success" icon="el-icon-edit" @click="handleChangeDialog(scope.row)">编辑</YlButton>
              <YlButton uiType="main" btnType="danger" icon="el-icon-delete" @click="deleteSingleData(scope.row.nns_id)">删除</YlButton>
            </template>
          </el-table-column>
          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
        <!-- 分页模块 -->
        <YlPage :size="size" :page="page" :total="total" />
      </div>

      <!-- 修改dialog -->
      <el-dialog title="修改预算编制阶段" :visible.sync="openSubmitDialog" width="1184px" class="yl-dialog">
        <YlForm
          ref="ylform"
          :formConfig="formConfig"
          @close-dialog="getCloseDialog"
          @init-state="getInitState"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      // table 列表数据
      tableData: [],
      // 分页
      page: 1,
      size: 10,
      total: 0,
      openSubmitDialog: false,
      // 初始化form按钮
      isBtnLoading: false,
      formConfig: {
        changeId: '',
        labelWidth: 'auto',
        btnMethod: ['save', 'cancel'],
        isFix: true,
        formData: {
          timing: [],
          budget_end_time: '',
          kind: '1',
          state: ''
        },
        editRules: {
          timing: [
            { required: true, message: '请选择预算开始结束时间', trigger: 'change' }
          ],
          budget_end_time: [
            { required: true, message: '请选择编制结束时间', trigger: 'change' }
          ],
          kind: [
            { required: true, message: '请选择预算编制类型', trigger: 'change' }
          ],
          state: [
            { required: true, message: '请选择预算编制状态', trigger: 'change' }
          ]
        },
        columns: [
          {
            type: 'select',
            label: '预算编制类型',
            multiple: false,
            prop: 'kind',
            options: [
              { value: 1, label: '行政' },
              { value: 2, label: '教学' },
              { value: 3, label: '公共' }
            ]
          },
          {
            type: 'select',
            label: '预算编制状态',
            multiple: false,
            prop: 'state',
            options: [
              { value: 1, label: '开启' },
              { value: 0, label: '关闭' }
            ]
          },
          {
            type: 'timeRange',
            label: '预算开始结束时间',
            prop: 'timing',
            timer: {
              start_time: '',
              end_time: ''
            }
          },
          {
            type: 'time',
            label: '编制结束时间',
            prop: 'budget_end_time'
          }
        ],
        changeApi: this.$ylapi.changeStage
      }
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    // 列表初始化
    initTable () {
      this.loading = true
      this.initData()
    },

    // 数据初始化
    async initData () {
      let data = await this.$ylapi.getStageList({
        'page': this.page,
        'page_size': this.size
      })
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
      this.loading = false
    },

    // 修改dialog
    handleChangeDialog (row) {
      this.formConfig.formData.timing = []
      this.formConfig.changeId = row.nns_id
      this.formConfig.formData.timing.push(row.nns_start_time, row.nns_end_time)
      this.formConfig.formData.start_time = row.nns_start_time
      this.formConfig.formData.end_time = row.nns_end_time
      this.formConfig.formData.budget_end_time = row.nns_write_end_time
      this.formConfig.formData.kind = row.nns_type
      this.formConfig.formData.state = row.nns_state
      this.openSubmitDialog = true
    },

    // 删除单个数据
    async deleteSingleData (id) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        api: this.$ylapi.deleteStage,
        obj: id
      })
        ? this.initTable()
        : ''
    },

    // 初始化
    getInitState () {
      this.openSubmitDialog = false
      this.initTable()
    },

    // 关闭弹窗
    getCloseDialog (val) { this.openSubmitDialog = val }
  }
}
</script>

<style lang="scss" scoped>

</style>
